<template>
  <div class>
    <el-row style="padding-top: 10px">
      <el-col :span="24" style="padding: 15px 0;">
        <el-card>
          <div class="title">数据统计</div>
          <div style="padding:20px;">
            <!-- 模块一 -->
            <span>用户-所在地</span>
            <el-divider></el-divider>
            <div class="filter">
              <el-form :inline="true" size="small" :model="formInline" class="demo-form-inline">
                <el-form-item label>
                  <el-select v-model="formInline.region" placeholder="省/市">
                    <el-option label="区域一" value="shanghai"></el-option>
                    <el-option label="区域二" value="beijing"></el-option>
                  </el-select>
                </el-form-item>
                <el-form-item label>
                  <el-select v-model="formInline.region" placeholder="市区">
                    <el-option label="区域一" value="shanghai"></el-option>
                    <el-option label="区域二" value="beijing"></el-option>
                  </el-select>
                </el-form-item>
                <el-form-item>
                  <el-button type="primary">查询</el-button>
                </el-form-item>
              </el-form>
            </div>
            <div id="indexbar" style="width:100%;height:370px;"></div>
            <!-- 模块一 结束-->
            <!-- 模块二 开始-->
            <span>销量排行榜</span>
            <el-divider></el-divider>
            <div class="bar disflex">
              <bar-echart :pieChart="barlogo1" :chartObj="chartObj" style="height:500px;width:30%;"></bar-echart>
              <bar-echart :pieChart="barlogo2" :chartObj="chartObj" style="height:500px;width:30%;"></bar-echart>
              <bar-echart :pieChart="barlogo3" :chartObj="chartObj" style="height:500px;width:30%;"></bar-echart>
            </div>
            <div>
              <!-- 模块二 结束-->

              <!-- 模块4 begin-->
              <span>购买人地域/商品所在地占比</span>
              <el-divider></el-divider>
              <div class="indexpieblock">
                <div class="disflex">
                  <el-form :inline="true" size="small" :model="formInline" class="demo-form-inline">
                    <el-button type="primary" size="small">购买人地域</el-button>
                    <el-button type="success" size="small">商品所在地</el-button>
                    <el-button type="success" size="small">交易额</el-button>
                    <el-form-item label>
                      <el-select v-model="formInline.region" placeholder="省/市">
                        <el-option label="区域一" value="shanghai"></el-option>
                        <el-option label="区域二" value="beijing"></el-option>
                      </el-select>
                    </el-form-item>
                    <el-form-item label>
                      <el-select v-model="formInline.region" placeholder="市区">
                        <el-option label="区域一" value="shanghai"></el-option>
                        <el-option label="区域二" value="beijing"></el-option>
                      </el-select>
                    </el-form-item>
                    <el-form-item>
                      <el-button type="primary">查询</el-button>
                    </el-form-item>
                  </el-form>
                </div>
                <el-row>
                  <el-col :span="12">
                    <h3 class="center">全国占比</h3>
                    <pie-chart
                      style="width:100%;height:400px;"
                      :pieChart="pieChart1"
                      :chartDataObj="chartDataObj1"
                    ></pie-chart>
                  </el-col>
                  <el-col :span="12">
                    <h3 class="center">
                      省/市内占比
                      <el-select size="small" v-model="formInline.region" placeholder="省/市">
                        <el-option label="区域一" value="shanghai"></el-option>
                        <el-option label="区域二" value="beijing"></el-option>
                      </el-select>
                    </h3>
                    <pie-chart
                      style="width:100%;height:400px;"
                      :pieChart="pieChart2"
                      :chartDataObj="chartDataObj2"
                    ></pie-chart>
                  </el-col>
                </el-row>
              </div>
              <!-- 模块4 end-->
              <!-- 模块三 开始-->
              <span>交易额/交易量走势图</span>
              <el-divider></el-divider>

              <div class="disflex">
                <el-form :inline="true" size="small" :model="formInline" class="demo-form-inline">
                  <el-button type="primary" size="small">按交易用户量查询</el-button>
                  <el-button type="success" size="small">按商品交易量查询</el-button>

                  <el-form-item label>
                    <el-select v-model="formInline.region" placeholder="2019">
                      <el-option label="区域一" value="shanghai"></el-option>
                      <el-option label="区域二" value="beijing"></el-option>
                    </el-select>
                  </el-form-item>
                  <el-form-item label>
                    <el-select v-model="formInline.region" placeholder="月份">
                      <el-option label="区域一" value="shanghai"></el-option>
                      <el-option label="区域二" value="beijing"></el-option>
                    </el-select>
                  </el-form-item>
                  <el-form-item>
                    <el-button type="primary">查询</el-button>
                  </el-form-item>
                </el-form>
              </div>
              <line-echart
                :lineChart="linelogo"
                :chartObj="chartObj"
                style="height:300px;width:100%;"
              ></line-echart>
            </div>
            <!-- 模块三 结束-->
            <!-- 模块5 begin-->
            <span>参数占比</span>
            <el-divider></el-divider>
            <div class="indexpieblock">
              <div class="disflex">
                <el-form :inline="true" size="small" :model="formInline" class="demo-form-inline">
                  <el-button type="primary" size="small">销售类型</el-button>
                  <el-button type="success" size="small">品牌</el-button>
                  <el-button type="success" size="small">吨位</el-button>
                  <el-button type="success" size="small">燃料种类</el-button>
                  <el-button type="success" size="small">介质类型</el-button>
                  <el-form-item label>
                    <el-select v-model="formInline.region" placeholder="2019">
                      <el-option label="区域一" value="shanghai"></el-option>
                      <el-option label="区域二" value="beijing"></el-option>
                    </el-select>
                  </el-form-item>
                  <el-form-item label>
                    <el-select v-model="formInline.region" placeholder="月份">
                      <el-option label="区域一" value="shanghai"></el-option>
                      <el-option label="区域二" value="beijing"></el-option>
                    </el-select>
                  </el-form-item>
                  <el-form-item>
                    <el-button type="primary">查询</el-button>
                  </el-form-item>
                </el-form>
              </div>
              <el-row>
                <el-col :span="12">
                  <h3 class="center">全国占比</h3>
                  <pie-chart
                    style="width:100%;height:400px;"
                    :pieChart="pieChart3"
                    :chartDataObj="chartDataObj3"
                  ></pie-chart>
                </el-col>
                <el-col :span="12">
                  <h3 class="center">
                    省/市内占比
                    <el-select size="small" v-model="formInline.region" placeholder="省/市">
                      <el-option label="区域一" value="shanghai"></el-option>
                      <el-option label="区域二" value="beijing"></el-option>
                    </el-select>
                  </h3>
                  <pie-chart
                    style="width:100%;height:400px;"
                    :pieChart="pieChart4"
                    :chartDataObj="chartDataObj4"
                  ></pie-chart>
                </el-col>
              </el-row>
            </div>
            <!-- 模块5 end-->
          </div>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import echarts from "echarts";
import barEchart from "../../components/echarts/bar.vue";
import lineEchart from "../../components/echarts/line.vue";
import pieChart from "../../components/echarts/pieChart.vue";

import config from "@/config.js";

export default {
  components: {
    barEchart,
    lineEchart,
    pieChart
  },
  data() {
    return {
      formInline: {},
      pieChart1: "pieChart1",
      chartDataObj1: {
        Name: ["河北", "山东", "黑龙江"],
        Data: ["12", "23", "34"]
      },
      pieChart2: "pieChart2",
      chartDataObj2: {
        Name: ["廊坊", "沧州", "邢台"],
        Data: ["12", "23", "34"]
      },
      pieChart3: "pieChart3",
      chartDataObj3: {
        Name: ["河北", "山东", "黑龙江"],
        Data: ["12", "23", "34"]
      },
      pieChart4: "pieChart4",
      chartDataObj4: {
        Name: ["廊坊", "沧州", "邢台"],
        Data: ["12", "23", "34"]
      },
      barlogo1: "barlogo1",
      barlogo2: "barlogo2",
      barlogo3: "barlogo3",
      linelogo: "linelogo",
      msg: "Welcome to Your Vue.js App",
      chartObj: {},
      IndexOption: {
        color: ["#3398DB"],
        tooltip: {
          trigger: "axis",
          axisPointer: {
            // 坐标轴指示器，坐标轴触发有效
            type: "shadow" // 默认为直线，可选为：'line' | 'shadow'
          }
        },
        grid: {
          left: "3%",
          right: "4%",
          bottom: "3%",
          containLabel: true
        },
        xAxis: [
          {
            type: "category",
            data: [
              "Mon",
              "Tue",
              "Wed",
              "Thu",
              "Fri",
              "Sat",
              "Sun",
              "Mon",
              "Tue",
              "Wed",
              "Thu",
              "Fri",
              "Sat",
              "Sun"
            ],
            axisTick: {
              alignWithLabel: true
            }
          }
        ],
        yAxis: [
          {
            type: "value",
            name: "用户"
          }
        ],
        series: [
          {
            name: "直接访问",
            type: "bar",
            barWidth: "60%",
            data: [
              10,
              52,
              200,
              334,
              390,
              330,
              220,
              10,
              52,
              200,
              334,
              390,
              330,
              220
            ]
          }
        ]
      }
    };
  },
  methods: {
    seeMore() {
      var _this = this;
      _this.$router.push({ path: "/superviseList" });
    },
    handleClick(tab, event) {
      console.log(tab, event);
    },
    init() {
      var _this = this;
      const indexbar = echarts.init(document.getElementById("indexbar"));

      indexbar.setOption(_this.IndexOption);

      window.addEventListener("resize", function() {
        indexbar.resize();
      });
    }
  },
  mounted() {
    var _this = this;
    setTimeout(function() {
      _this.init();
    }, 500);

    setTimeout(function() {
      _this.chartObj = {
        title: "品牌",
        ydata: [
          "宁夏",
          "四川",
          "内蒙古",
          "新疆",
          "江苏",
          "山西",
          "陜西",
          "河南",
          "河北",
          "山东"
        ],
        Sdata: [370, 1250, 1600, 2335, 1278, 550, 700, 1820, 450, 790]
      };
    }, 500);
  }
};
</script>

<style scoped>
.bar.disflex {
  justify-content: space-between;
}
.indexpieblock {
  padding: 20px 0;
}
</style>
